<template>
  <div class="center-item">
    <dv-border-Box-1>
      <div class="boder">
        <div  class="wrap">
          <div class="left" v-if="item.title" @click="itemTextClick(-1)">
              <span>{{item.value}}</span><br/>
              {{item.title}}<br/>
              <div class="plus"  @click.stop="itemTextClick(-1,true)">今日<span>+{{item.plus}}</span></div>
          </div>
          <div  class="right">
            <div class="item" v-for="it,index in item.data||[]" :key="index">
              <div class="all" @click="itemTextClick(index)"> {{it.title}}<span>{{it.value}}</span>{{item.unit}}</div>
              <div class="today" @click="itemTextClick(index,true)">今日<span>+{{it.plus||0}}</span></div>
            </div>
          </div>
       </div>
     </div>
   </dv-border-Box-1>
  </div>
</template>

<script>
export default {
  components: {
  },
  props:{
    item:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  methods: {
    itemTextClick(index,today){
        this.$emit('itemTextClick',{title:this.item.title,index,today})
    },
  },

};
</script>

<style lang="scss" scoped>

.center-item{
  color:#fff;
    // background-image: url("~@/assets/screen/img2.png");
    background-size: cover;
    background-position: center center;
    width: 30.667vw;
    height: 9.524vw;
    margin-left: 2vw;
    margin-top: 0.3vw;
  .boder{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    .wrap{
      border-radius: 26px;
      width: 100%;
      height: 100%;
      background: rgb(40,91,156);
      display: flex;
      align-items: center;
    }
  }

  .left{
    font-size: 1.5vw;
    text-align: center;
    margin:0 3vw;
    .plus{
      font-size: 0.2rem;
    }
    span:first-child{
      font-size: 0.4rem;
      color: #00FF00;
      font-weight: bold;
      margin: 0 10px;
    }
    span:nth-child(2){
      color:#fff;
      font-size: 0.2rem;
      margin-left: 20px;
    }
    span:last-child{
      font-size: 0.25rem;
      color: red;
      margin-left: 0.05rem;
    }
  }
  .right{
    font-size: 0.25rem;
    padding: 0.5vw 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .item{
      display: flex;
      padding: 0 !important;
      span:first-child{
        color: #00FF00;
        font-weight: bold;
        margin: 0 10px;
      }
      div{
        font-size: 0.2rem;
        span{
          font-size: 0.25rem;
        }
      }
      .all{
        width: 10vw;
      }
      .today{
        span{
          color:red
        }
      }
    }

  }

}
</style>
